<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>EchartGL实例</title>
    {% include 'common/echart_base.html' %}
    <script type="text/javascript" src="{% static 'echart/echarts-gl.js' %}"></script>

    
    <script type="text/javascript">
        $(document).ready(function () {

            /**************************************高斯分布************************************************/
            function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
                return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {
                    var exponent = -(
                            ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))
                            + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))
                        );
                    return amplitude * Math.pow(Math.E, exponent);
                }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
            }
            // 创建一个高斯分布函数
            var gaussian = makeGaussian(50, 0, 0, 20, 20);

            var data = [];
            for (var i = 0; i < 1000; i++) {
                // x, y 随机分布
                var x = Math.random() * 100 - 50;
                var y = Math.random() * 100 - 50;
                var z = gaussian(x, y);
                data.push([x, y, z]);
            }


            var option={
                legend:{icon: 'roundRect'},
                color:'#0b9eff',
                backgroundColor:'rgba(50,59,100,0.3)',
                tooltip:{},
                grid3D:{},
                xAxis3D:{},
                yAxis3D:{},
                zAxis3D:{max:100},
                series:[{
                    name:'高斯分布',
                    //三维散点图
                    type:'scatter3D',
                    data:data
                    }
                ]
            };

            /**************************************三维曲面图 surface************************************************/
            var data = [];
            // 曲面图要求给入的数据是网格形式按顺序分布。
            for (var y = -50; y <= 50; y++) {
                for (var x = -50; x <= 50; x++) {
                    var z = gaussian(x, y);
                    data.push([x, y, z]);
                }
            }
            option1 = {
                legend:{},
                backgroundColor:'rgba(116,50,92,0.7)',
                color:'#6f84ff',
                grid3D: {},
                xAxis3D: {},
                yAxis3D: {},
                zAxis3D: { max: 60 },
                series: [{
                    name:'surface图',
                    type: 'surface',
                    data: data
                }]
            }

            /**************************************自定义映射三维图************************************************/
            var lifedata=[];

            $.ajax({
                url:"{% static 'life-expectancy-table.json' %}",
                method:'POST',
                async:false,
                success:function (data) {
                    lifedata=data;
                }
            });

            option2={
                legend:{icon: 'roundRect'},
                tooltip:{},
                backgroundColor:'rgba(159,168,163,0.3)',
                color:'#ff7714',
                grid3D: {
                    viewControl: {
                        // 使用正交投影。
                        projection: 'orthographic'
                    }
                },
                //申明x,y轴为类目轴
                xAxis3D: {type:'category'},
                //yAxis3D: {type:'category'},
                yAxis3D: {type:'log'},
                zAxis3D:{},
                visualMap: {
                    calculable: true,
                    max: 100,
                    // 维度的名字默认就是表头的属性名
                    dimension: 'Life Expectancy',
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                dataset:{
                    dimension:["Income","Life Expectancy","Population","Country","Year"],
                    source:lifedata
                },
                series:[
                    {
                        name:'人员消费',
                        type:'bar3D',
                        symbolSize:5,
                        //自定义x,y,z轴的映射
                        encode:{
                            x:"Country",
                            y:"Year",
                            z:"Income",
                            //tooltip: [0, 1, 2, 3, 4]
                        }
                        //默认前三列映射到x,y,z
                        //data:lifedata
                    }
                ]
            }

            myChart=echarts.init(document.getElementById('echart_gl'));
            myChart.setOption(option1);

        })
    </script>
</head>
<body>
<div id="echart_gl" style="width: 900px;height: 700px;margin: 0 auto;border:1px solid lightgrey;"></div>
</body>
</html>